<template>
  <div class="crawler-container">
    <!-- 顶部横幅 -->
    <div class="crawler-header">
      <div class="header-content">
        <div class="header-icon">
          <div class="icon-wrapper">🕷️</div>
        </div>
        <div class="header-text">
          <h1>导航网站爬取工具</h1>
          <p class="description">输入其他导航网站的地址，自动提取网站数据和图片</p>
        </div>
      </div>
    </div>

    <!-- 主要操作区域 -->
    <div class="crawler-form">
      <el-card class="form-card" shadow="hover">
        <template #header>
          <div class="card-title">
            <el-icon><Link /></el-icon>
            <span>网站爬取</span>
          </div>
        </template>
        <el-form :model="form" label-width="0">
          <el-form-item>
            <el-input
              v-model="form.targetUrl"
              placeholder="请输入导航网站地址，例如: https://www.example.com"
              size="large"
              clearable
              class="url-input"
            >
              <template #prepend>
                <el-icon><Link /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <div class="action-buttons">
              <el-button 
                class="action-btn primary-btn"
                @click="handleCrawl" 
                :loading="crawlLoading"
                :disabled="!form.targetUrl"
                size="large"
              >
                <el-icon><Download /></el-icon>
                <span>开始爬取</span>
              </el-button>

              <el-button 
                class="action-btn info-btn"
                @click="handlePreview" 
                :loading="previewLoading"
                :disabled="!form.targetUrl"
                size="large"
              >
                <el-icon><Document /></el-icon>
                <span>预览数据</span>
              </el-button>

              <el-button 
                class="action-btn preview-btn"
                @click="showWebsitePreview"
                :disabled="!form.targetUrl"
                size="large"
              >
                <el-icon><View /></el-icon>
                <span>预览网站</span>
              </el-button>

              <el-button 
                class="action-btn reset-btn"
                @click="handleReset"
                size="large"
              >
                <el-icon><Refresh /></el-icon>
                <span>重置</span>
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 网站预览区域 -->
    <div v-if="showPreview" class="website-preview">
      <el-card class="preview-card" shadow="hover">
        <template #header>
          <div class="card-title-with-actions">
            <div class="card-title">
              <el-icon><View /></el-icon>
              <span>网站预览</span>
            </div>
            <div class="card-actions">
              <el-tag class="url-tag" type="info">{{ previewUrl }}</el-tag>
              <el-button 
                size="small" 
                :icon="Refresh"
                @click="refreshPreview"
                :loading="previewRefreshing"
                class="action-button"
              >
                刷新
              </el-button>
              <el-button 
                size="small"
                @click="closePreview"
                class="action-button close-btn"
              >
                关闭
              </el-button>
            </div>
          </div>
        </template>

        <div class="preview-wrapper">
          <div v-if="previewError" class="preview-error">
            <el-alert
              title="无法预览此网站"
              :description="previewError"
              type="warning"
              :closable="false"
              show-icon
            />
            <div style="margin-top: 20px;">
              <el-button 
                type="primary" 
                @click="openInNewTab"
              >
                在新标签页中打开
              </el-button>
            </div>
          </div>
          <iframe
            v-else
            ref="previewIframe"
            :src="previewUrl"
            class="preview-iframe"
            frameborder="0"
            sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-top-navigation"
            @load="handleIframeLoad"
            @error="handleIframeError"
          ></iframe>
          <div v-if="websitePreviewLoading" class="preview-loading">
            <el-icon class="is-loading"><Loading /></el-icon>
            <span style="margin-left: 10px;">正在加载网站...</span>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 已同步网站列表 -->
    <div class="crawler-records" v-loading="recordsLoading">
      <el-card class="records-card" shadow="hover">
        <template #header>
          <div class="card-title-with-actions">
            <div class="card-title">
              <el-icon><Document /></el-icon>
              <span>已同步的导航网站</span>
            </div>
            <el-button 
              size="small" 
              :icon="Refresh" 
              @click="loadRecords"
              :loading="recordsLoading"
              class="action-button"
            >
              刷新
            </el-button>
          </div>
        </template>

        <div v-if="crawlerRecords.length === 0" class="empty-records">
          <el-empty description="暂无已同步的网站记录" />
        </div>

        <el-table 
          v-else
          :data="crawlerRecords" 
          stripe 
          style="width: 100%"
        >
          <el-table-column type="index" label="#" width="60" />
          
          <el-table-column prop="siteName" label="网站名称" width="150">
            <template #default="{ row }">
              <el-tag type="info">{{ row.siteName || '未知网站' }}</el-tag>
            </template>
          </el-table-column>
          
          <el-table-column prop="targetUrl" label="目标网站URL" min-width="300">
            <template #default="{ row }">
              <el-link :href="row.targetUrl" target="_blank" type="primary">
                {{ row.targetUrl }}
              </el-link>
            </template>
          </el-table-column>
          
          <el-table-column prop="totalCount" label="网站数量" width="120" align="center">
            <template #default="{ row }">
              <el-tag type="success" size="large">{{ row.totalCount || 0 }}</el-tag>
            </template>
          </el-table-column>
          
          <el-table-column prop="crawlTime" label="同步时间" width="180">
            <template #default="{ row }">
              {{ formatTime(row.crawlTime) }}
            </template>
          </el-table-column>
          
          <el-table-column prop="createTime" label="创建时间" width="180">
            <template #default="{ row }">
              {{ formatTime(row.createTime) }}
            </template>
          </el-table-column>
          
          <el-table-column label="操作" width="120" fixed="right" align="center">
            <template #default="{ row }">
              <el-button 
                type="danger" 
                size="small" 
                :icon="Delete"
                @click="handleDeleteRecord(row.id)"
                :loading="deletingIds.includes(row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div v-if="recordsTotal > 0" class="pagination-wrapper">
          <el-pagination
            v-model:current-page="recordsPage.current"
            v-model:page-size="recordsPage.size"
            :total="recordsTotal"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleRecordsSizeChange"
            @current-change="handleRecordsPageChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 结果展示区域 -->
    <div v-if="result" class="crawler-result">
      <el-card class="result-card" shadow="hover">
        <template #header>
          <div class="card-title-with-actions">
            <div class="card-title">
              <el-icon><Download /></el-icon>
              <span>爬取结果</span>
            </div>
            <el-tag :type="result.totalCount > 0 ? 'success' : 'warning'" class="result-tag">
              {{ result.totalCount > 0 ? '爬取成功' : '未获取到数据' }}
            </el-tag>
          </div>
        </template>

        <div class="result-stats">
          <div class="stats-cards">
            <div class="stat-card">
              <div class="stat-icon">
                <el-icon><Link /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-label">来源网站</div>
                <el-link :href="result.sourceUrl" target="_blank" class="stat-value">
                  {{ result.sourceUrl }}
                </el-link>
              </div>
            </div>
            <div class="stat-card">
              <div class="stat-icon">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-label">爬取时间</div>
                <div class="stat-value">{{ formatTime(result.crawlTime) }}</div>
              </div>
            </div>
            <div class="stat-card highlight">
              <div class="stat-icon">
                <el-icon><Download /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-label">网站总数</div>
                <div class="stat-value number">{{ result.totalCount }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 分类统计 -->
        <div v-if="result.menuCount && Object.keys(result.menuCount).length > 0" class="menu-stats">
          <div class="section-title">
            <el-icon><Document /></el-icon>
            <span>分类统计</span>
          </div>
          <div class="menu-grid">
            <div 
              v-for="(count, menu) in result.menuCount" 
              :key="menu"
              class="menu-card"
            >
              <div class="menu-card-content">
                <div class="menu-name">{{ menu }}</div>
                <div class="menu-count">{{ count }} 个</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 网站列表 -->
        <div v-if="result.websites && result.websites.length > 0" class="website-list">
          <div class="section-title">
            <el-icon><Link /></el-icon>
            <span>网站列表（显示前 {{ Math.min(displayLimit, result.websites.length) }} 个）</span>
          </div>
          
          <el-table 
            :data="displayWebsites" 
            stripe 
            style="width: 100%"
            max-height="500"
          >
            <el-table-column type="index" label="#" width="60" />
            
            <el-table-column prop="menuName" label="分类" width="120">
              <template #default="{ row }">
                <el-tag size="small">{{ row.menuName }}</el-tag>
              </template>
            </el-table-column>
            
            <el-table-column prop="websiteName" label="网站名称" width="150" />
            
            <el-table-column prop="websiteUrl" label="网站地址" min-width="200">
              <template #default="{ row }">
                <el-link :href="row.websiteUrl" target="_blank" type="primary">
                  {{ row.websiteUrl }}
                </el-link>
              </template>
            </el-table-column>
            
            <el-table-column prop="websiteLogo" label="Logo" width="80" align="center">
              <template #default="{ row }">
                <el-image 
                  v-if="row.websiteLogo"
                  :src="row.websiteLogo" 
                  style="width: 32px; height: 32px;"
                  fit="cover"
                  :preview-src-list="[row.websiteLogo]"
                  preview-teleported
                >
                  <template #error>
                    <div class="image-slot">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                </el-image>
                <span v-else>-</span>
              </template>
            </el-table-column>
            
            <el-table-column prop="websiteRemark" label="描述" min-width="200" show-overflow-tooltip />
          </el-table>

          <div v-if="result.websites.length > displayLimit" class="show-more">
            <el-button 
              @click="displayLimit += 50" 
              class="show-more-btn"
            >
              显示更多 (还有 {{ result.websites.length - displayLimit }} 个)
            </el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 使用说明 -->
    <div class="crawler-help">
      <el-card class="help-card" shadow="hover">
        <template #header>
          <div class="card-title">
            <el-icon><Document /></el-icon>
            <span>使用说明</span>
          </div>
        </template>
        <el-steps direction="vertical" :active="0">
          <el-step title="步骤1: 输入目标网站" description="在上方输入框中填入要爬取的导航网站URL" />
          <el-step title="步骤2: 测试爬取（推荐）" description="点击【测试爬取】按钮，验证是否能正常获取数据" />
          <el-step title="步骤3: 开始爬取" description="确认无误后，点击【开始爬取】按钮进行完整爬取" />
          <el-step title="步骤4: 查看结果" description="爬取完成后，在下方查看结果，文件将保存在服务器指定目录" />
        </el-steps>

        <el-divider />

        <el-alert
          title="温馨提示"
          type="info"
          :closable="false"
        >
          <ul style="margin: 10px 0; padding-left: 20px;">
            <li>爬取大型网站可能需要较长时间，请耐心等待</li>
            <li>建议先使用"测试爬取"功能验证能否正常获取数据</li>
            <li>下载的图片和数据文件保存在服务器端</li>
            <li>支持大多数常见的导航网站结构</li>
            <li>请合理使用，注意版权问题</li>
          </ul>
        </el-alert>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElNotification, ElMessageBox } from 'element-plus'
import { Link, View, Download, Document, Refresh, Picture, Delete, Loading } from '@element-plus/icons-vue'
import { testCrawl, crawl, preview, getCrawlerRecords, deleteCrawlerRecord } from '@/api/crawler'
import { initTheme } from '@/utils/theme'

// 表单数据
const form = ref({
  targetUrl: ''
})

// 加载状态
const testLoading = ref(false)
const crawlLoading = ref(false)
const previewLoading = ref(false)

// 结果数据
const result = ref<any>(null)
const displayLimit = ref(50)

// 网站预览相关
const showPreview = ref(false)
const previewUrl = ref('')
const websitePreviewLoading = ref(false)
const previewRefreshing = ref(false)
const previewError = ref('')
const previewIframe = ref<HTMLIFrameElement | null>(null)

// 已同步网站记录相关
const crawlerRecords = ref<any[]>([])
const recordsLoading = ref(false)
const recordsPage = ref({
  current: 1,
  size: 10
})
const recordsTotal = ref(0)
const deletingIds = ref<(number | string)[]>([])

// 计算属性：显示的网站列表
const displayWebsites = computed(() => {
  if (!result.value || !result.value.websites) return []
  return result.value.websites.slice(0, displayLimit.value)
})

// 测试爬取
const handleTest = async () => {
  if (!validateUrl()) return

  testLoading.value = true
  try {
    const res = await testCrawl({ targetUrl: form.value.targetUrl })

    if (res.code === 0) {
      result.value = res.data
      ElNotification({
        title: '测试成功',
        message: `成功获取 ${res.data.totalCount} 个网站数据`,
        type: 'success'
      })
    } else {
      ElMessage.error(res.msg || '测试爬取失败')
    }
  } catch (error: any) {
    ElMessage.error(error.message || '测试爬取失败')
  } finally {
    testLoading.value = false
  }
}

// 开始爬取
const handleCrawl = async () => {
  if (!validateUrl()) return

  crawlLoading.value = true
  try {
    const res = await crawl({ targetUrl: form.value.targetUrl })

    if (res.code === 0) {
      result.value = res.data
      ElNotification({
        title: '爬取成功',
        message: res.msg || `成功爬取 ${res.data.totalCount} 个网站`,
        type: 'success',
        duration: 5000
      })
      // 爬取成功后刷新记录列表
      loadRecords()
    } else {
      ElMessage.error(res.msg || '爬取失败')
    }
  } catch (error: any) {
    ElMessage.error(error.message || '爬取失败')
  } finally {
    crawlLoading.value = false
  }
}

// 预览数据
const handlePreview = async () => {
  if (!validateUrl()) return

  previewLoading.value = true
  try {
    const res = await preview({ targetUrl: form.value.targetUrl })

    if (res.code === 0) {
      ElNotification({
        title: '预览信息',
        message: res.data,
        type: 'info',
        duration: 10000
      })
    } else {
      ElMessage.error(res.msg || '预览失败')
    }
  } catch (error: any) {
    ElMessage.error(error.message || '预览失败')
  } finally {
    previewLoading.value = false
  }
}

// 显示网站预览
const showWebsitePreview = () => {
  if (!validateUrl()) return
  
  previewUrl.value = form.value.targetUrl
  showPreview.value = true
  previewError.value = ''
  websitePreviewLoading.value = true
}

// 关闭预览
const closePreview = () => {
  showPreview.value = false
  previewUrl.value = ''
  previewError.value = ''
  websitePreviewLoading.value = false
}

// 刷新预览
const refreshPreview = () => {
  if (!previewIframe.value) return
  
  previewRefreshing.value = true
  previewError.value = ''
  websitePreviewLoading.value = true
  
  // 重新加载 iframe
  const currentSrc = previewIframe.value.src
  previewIframe.value.src = 'about:blank'
  
  setTimeout(() => {
    if (previewIframe.value) {
      previewIframe.value.src = currentSrc
    }
  }, 100)
}

// iframe 加载完成
const handleIframeLoad = () => {
  websitePreviewLoading.value = false
  previewRefreshing.value = false
  
  // 尝试检测是否因为 X-Frame-Options 被阻止
  try {
    if (previewIframe.value?.contentWindow) {
      // 如果能访问，说明加载成功
      previewError.value = ''
    }
  } catch (e) {
    // 跨域访问被阻止，但不一定是错误
    previewError.value = ''
  }
}

// iframe 加载错误
const handleIframeError = () => {
  websitePreviewLoading.value = false
  previewRefreshing.value = false
  previewError.value = '网站可能因为安全策略（X-Frame-Options）无法在框架中显示，或网站无法访问'
}

// 在新标签页中打开
const openInNewTab = () => {
  if (previewUrl.value) {
    window.open(previewUrl.value, '_blank')
  }
}

// 重置表单
const handleReset = () => {
  form.value = {
    targetUrl: ''
  }
  result.value = null
  displayLimit.value = 50
  closePreview()
}

// 验证URL
const validateUrl = () => {
  if (!form.value.targetUrl) {
    ElMessage.warning('请输入目标网站URL')
    return false
  }

  if (!form.value.targetUrl.startsWith('http://') && !form.value.targetUrl.startsWith('https://')) {
    ElMessage.warning('URL格式不正确，必须以http://或https://开头')
    return false
  }

  return true
}

// 格式化时间
const formatTime = (time: string) => {
  if (!time) return '-'
  return new Date(time).toLocaleString('zh-CN')
}

// 加载已同步网站记录
const loadRecords = async () => {
  recordsLoading.value = true
  try {
    const res = await getCrawlerRecords({
      current: recordsPage.value.current,
      size: recordsPage.value.size
    })
    if (res.code === 0 && res.data) {
      crawlerRecords.value = res.data.records || []
      recordsTotal.value = res.data.total || 0
    } else {
      ElMessage.error(res.msg || '获取记录列表失败')
    }
  } catch (error: any) {
    ElMessage.error(error.message || '获取记录列表失败')
  } finally {
    recordsLoading.value = false
  }
}

// 删除记录
const handleDeleteRecord = async (id: number | string) => {
  try {
    await ElMessageBox.confirm('确定要删除这条同步记录吗？删除后不影响已同步的网站数据。', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    deletingIds.value.push(id)
    try {
      const res = await deleteCrawlerRecord(id)
      if (res.code === 0) {
        ElMessage.success('删除成功')
        // 如果当前页没有数据了，返回上一页
        if (crawlerRecords.value.length === 1 && recordsPage.value.current > 1) {
          recordsPage.value.current--
        }
        loadRecords()
      } else {
        ElMessage.error(res.msg || '删除失败')
      }
    } catch (error: any) {
      ElMessage.error(error.message || '删除失败')
    } finally {
      deletingIds.value = deletingIds.value.filter(deleteId => deleteId !== id)
    }
  } catch {
    // 用户取消删除
  }
}

// 分页大小改变
const handleRecordsSizeChange = (size: number) => {
  recordsPage.value.size = size
  recordsPage.value.current = 1
  loadRecords()
}

// 页码改变
const handleRecordsPageChange = (page: number) => {
  recordsPage.value.current = page
  loadRecords()
}

// 初始化
onMounted(() => {
  initTheme()
  loadRecords()
})
</script>

<style scoped lang="scss">
.crawler-container {
  padding: 0;
  max-width: 1600px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--theme-background, linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%));
  transition: background 0.3s ease;
}

// 顶部横幅
.crawler-header {
  background: var(--theme-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
  padding: 60px 40px;
  margin-bottom: 30px;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  .header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .header-icon {
    flex-shrink: 0;

    .icon-wrapper {
      width: 80px;
      height: 80px;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;

      &:hover {
        transform: scale(1.1) rotate(5deg);
      }
    }
  }

  .header-text {
    flex: 1;

    h1 {
      font-size: 36px;
      font-weight: 700;
      color: #ffffff;
      margin: 0 0 12px 0;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
    }

    .description {
      font-size: 18px;
      color: rgba(255, 255, 255, 0.9);
      margin: 0;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }
  }
}

// 表单区域
.crawler-form {
  padding: 0 40px;
  margin-bottom: 30px;

  .form-card {
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }
  }

  .url-input {
    :deep(.el-input__wrapper) {
      border-radius: 12px;
      padding: 12px 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      &.is-focus {
        border-color: var(--theme-primary, #667eea);
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
      }
    }

    :deep(.el-input-group__prepend) {
      background: var(--theme-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
      border-color: var(--theme-primary, #667eea);
      color: #ffffff;
      border-radius: 12px 0 0 12px;
    }
  }

  .action-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .action-btn {
    flex: 1;
    min-width: 140px;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 15px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    .el-icon {
      margin-right: 6px;
      font-size: 18px;
    }

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    &:active {
      transform: translateY(0);
    }

    &.primary-btn {
      background: var(--theme-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
      color: #ffffff;

      &:hover {
        background: var(--theme-gradient, linear-gradient(135deg, #5568d3 0%, #653a91 100%));
      }

      &:disabled {
        background: var(--theme-border, #e4e7ed);
        color: var(--theme-text-secondary, #606266);
      }
    }

    &.info-btn {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      color: #ffffff;

      &:hover {
        background: linear-gradient(135deg, #3d9be8 0%, #00d9e8 100%);
      }
    }

    &.preview-btn {
      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      color: #ffffff;

      &:hover {
        background: linear-gradient(135deg, #e85f8a 0%, #eed130 100%);
      }
    }

    &.reset-btn {
      background: var(--theme-card-bg, #ffffff);
      color: var(--theme-text, #303133);
      border: 2px solid var(--theme-border, #e4e7ed);

      &:hover {
        border-color: var(--theme-primary, #667eea);
        color: var(--theme-primary, #667eea);
      }
    }
  }
}

// 通用卡片标题样式
.card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--theme-text, #303133);
  transition: color 0.3s ease;

  .el-icon {
    font-size: 20px;
    color: var(--theme-primary, #667eea);
  }
}

.card-title-with-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.action-button {
  border-radius: 8px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
  }
}

.url-tag {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 记录列表
.crawler-records {
  padding: 0 40px;
  margin-bottom: 30px;

  .records-card {
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }
  }

  .empty-records {
    padding: 60px 0;
  }

  .pagination-wrapper {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    padding: 20px 0;
  }
}

// 结果区域
.crawler-result {
  padding: 0 40px;
  margin-bottom: 30px;

  .result-card {
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }
  }

  .result-tag {
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 20px;
  }

  .result-stats {
    margin-bottom: 32px;

    .stats-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
    }

    .stat-card {
      background: var(--theme-card-bg, #ffffff);
      border: 2px solid var(--theme-border, #e4e7ed);
      border-radius: 16px;
      padding: 24px;
      display: flex;
      align-items: center;
      gap: 20px;
      transition: all 0.3s ease;
      cursor: pointer;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        border-color: var(--theme-primary, #667eea);
      }

      &.highlight {
        background: var(--theme-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
        border-color: transparent;
        color: #ffffff;

        .stat-icon {
          background: rgba(255, 255, 255, 0.2);
          color: #ffffff;
        }

        .stat-label {
          color: rgba(255, 255, 255, 0.9);
        }

        .stat-value {
          color: #ffffff;

          &.number {
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
          }
        }
      }

      .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        background: var(--theme-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 24px;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .stat-content {
        flex: 1;
        min-width: 0;

        .stat-label {
          font-size: 14px;
          color: var(--theme-text-secondary, #606266);
          margin-bottom: 8px;
        }

        .stat-value {
          font-size: 18px;
          font-weight: 600;
          color: var(--theme-text, #303133);
          word-break: break-all;

          &.number {
            font-size: 28px;
            color: var(--theme-primary, #667eea);
          }
        }
      }
    }
  }

  .menu-stats {
    margin-top: 32px;

    .section-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 20px;
      font-weight: 600;
      color: var(--theme-text, #303133);
      margin-bottom: 20px;
      transition: color 0.3s ease;

      .el-icon {
        color: var(--theme-primary, #667eea);
        font-size: 24px;
      }
    }

    .menu-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;
    }

    .menu-card {
      background: var(--theme-card-bg, #ffffff);
      border: 2px solid var(--theme-border, #e4e7ed);
      border-radius: 12px;
      padding: 20px;
      transition: all 0.3s ease;
      cursor: pointer;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        border-color: var(--theme-primary, #667eea);
      }

      .menu-card-content {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .menu-name {
          font-size: 16px;
          font-weight: 500;
          color: var(--theme-text, #303133);
          transition: color 0.3s ease;
        }

        .menu-count {
          font-size: 24px;
          font-weight: 700;
          background: var(--theme-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          transition: all 0.3s ease;
        }
      }
    }
  }

  .website-list {
    margin-top: 32px;

    .section-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 20px;
      font-weight: 600;
      color: var(--theme-text, #303133);
      margin-bottom: 20px;
      transition: color 0.3s ease;

      .el-icon {
        color: var(--theme-primary, #667eea);
        font-size: 24px;
      }
    }

    .image-slot {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, var(--theme-border, #e4e7ed) 0%, var(--theme-card-bg, #ffffff) 100%);
      color: var(--theme-text-secondary, #606266);
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .show-more {
      text-align: center;
      margin-top: 24px;
    }

    .show-more-btn {
      background: var(--theme-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
      color: #ffffff;
      border: none;
      padding: 12px 32px;
      border-radius: 24px;
      font-weight: 500;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
      }
    }
  }
}

// 预览区域
.website-preview {
  padding: 0 40px;
  margin-bottom: 30px;

  .preview-card {
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }
  }

  .close-btn {
    background: var(--theme-card-bg, #ffffff);
    color: var(--theme-text-secondary, #606266);
    border: 1px solid var(--theme-border, #e4e7ed);

    &:hover {
      background: #fee;
      border-color: #f56c6c;
      color: #f56c6c;
    }
  }

  .preview-wrapper {
    position: relative;
    width: 100%;
    height: 600px;
    border: 2px solid var(--theme-border, #e4e7ed);
    border-radius: 12px;
    overflow: hidden;
    background: var(--theme-card-bg, #ffffff);
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .preview-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--theme-card-bg, #ffffff);
    transition: background 0.3s ease;
  }

  .preview-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--theme-primary, #667eea);
    font-size: 16px;
    z-index: 10;
    transition: color 0.3s ease;

    .el-icon {
      font-size: 32px;
    }
  }

  .preview-error {
    padding: 60px 20px;
    text-align: center;
  }
}

// 帮助说明
.crawler-help {
  padding: 0 40px;
  margin-bottom: 40px;

  .help-card {
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }
  }

  :deep(.el-step__description) {
    padding-right: 20px;
    color: var(--theme-text-secondary, #606266);
    transition: color 0.3s ease;
  }

  :deep(.el-step__title) {
    color: var(--theme-text, #303133);
    transition: color 0.3s ease;
  }

  :deep(.el-step__icon) {
    color: var(--theme-primary, #667eea);
  }

  ul {
    line-height: 2;
    color: var(--theme-text-secondary, #606266);
    transition: color 0.3s ease;
    padding-left: 24px;

    li {
      margin-bottom: 8px;
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .crawler-header {
    padding: 40px 24px;
    margin-bottom: 24px;

    .header-content {
      flex-direction: column;
      text-align: center;
    }

    .header-text h1 {
      font-size: 28px;
    }
  }

  .crawler-form,
  .website-preview,
  .crawler-records,
  .crawler-result,
  .crawler-help {
    padding: 0 24px;
  }

  .action-buttons {
    flex-direction: column;

    .action-btn {
      width: 100%;
    }
  }

  .stats-cards {
    grid-template-columns: 1fr !important;
  }

  .menu-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .crawler-header {
    padding: 30px 16px;
    border-radius: 0 0 16px 16px;

    .header-icon .icon-wrapper {
      width: 60px;
      height: 60px;
      font-size: 36px;
    }

    .header-text {
      h1 {
        font-size: 24px;
      }

      .description {
        font-size: 14px;
      }
    }
  }

  .crawler-form,
  .website-preview,
  .crawler-records,
  .crawler-result,
  .crawler-help {
    padding: 0 16px;
    margin-bottom: 20px;
  }

  .card-title-with-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .preview-wrapper {
    height: 400px !important;
  }
}

// Element Plus 组件主题适配
:deep(.el-card) {
  background: var(--theme-card-bg, #ffffff);
  border-color: var(--theme-border, #e4e7ed);
  color: var(--theme-text, #303133);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

:deep(.el-card__header) {
  color: var(--theme-text, #303133);
  border-bottom-color: var(--theme-border, #e4e7ed);
}

:deep(.el-table) {
  background-color: var(--theme-card-bg, #ffffff);
  color: var(--theme-text, #303133);
  
  th {
    background-color: var(--theme-card-bg, #ffffff);
    color: var(--theme-text, #303133);
    border-bottom-color: var(--theme-border, #e4e7ed);
  }
  
  td {
    border-bottom-color: var(--theme-border, #e4e7ed);
    position: relative;
  }
  
  tr:hover > td {
    background-color: transparent;
  }
}

:deep(.el-tag) {
  border-color: var(--theme-border, #e4e7ed);
}

:deep(.el-link) {
  color: var(--theme-primary, #667eea);
  
  &:hover {
    color: var(--theme-secondary, #764ba2);
  }
}

:deep(.el-descriptions) {
  .el-descriptions__label {
    color: var(--theme-text-secondary, #606266);
  }
  
  .el-descriptions__content {
    color: var(--theme-text, #303133);
  }
  
  .el-descriptions__table {
    border-color: var(--theme-border, #e4e7ed);
  }
  
  .el-descriptions__table td,
  .el-descriptions__table th {
    border-color: var(--theme-border, #e4e7ed);
  }
}

:deep(.el-pagination) {
  .el-pagination__total,
  .el-pagination__jump {
    color: var(--theme-text-secondary, #606266);
  }
  
  .el-pagination button {
    color: var(--theme-text, #303133);
    border-color: var(--theme-border, #e4e7ed);
    
    &:hover {
      color: var(--theme-primary, #667eea);
    }
    
    &.is-active {
      background-color: var(--theme-primary, #667eea);
      border-color: var(--theme-primary, #667eea);
      color: #ffffff;
    }
  }
  
  .el-pager li {
    color: var(--theme-text, #303133);
    border-color: var(--theme-border, #e4e7ed);
    
    &:hover {
      color: var(--theme-primary, #667eea);
    }
    
    &.is-active {
      background-color: var(--theme-primary, #667eea);
      border-color: var(--theme-primary, #667eea);
      color: #ffffff;
    }
  }
  
  .el-input__inner {
    border-color: var(--theme-border, #e4e7ed);
    color: var(--theme-text, #303133);
    background-color: var(--theme-card-bg, #ffffff);
  }
}
</style>

